<template>
	<div class="page-container padding-20 query-list-container">
		<div class="search-container">
			<el-form :inline="true" ref="form" :model="searchData" size="small">
				<el-form-item label="关键字输入">
					<el-input v-model="searchData.idOrName" placeholder="产品ID或名称"></el-input>
				</el-form-item>
				<el-form-item label="权益类别">
					<el-select v-model="searchData.privilegeId" clearable>
						<el-option
							v-for="equity in equityList"
							:key="equity.id"
							:label="equity.name"
							:value="equity.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属品牌">
					<el-select v-model="searchData.brandId" clearable>
						<el-option v-for="brand in brandList" :key="brand.id" :label="brand.name" :value="brand.id"></el-option>
					</el-select>
				</el-form-item>
				<el-button type="primary" @click="onSearch" size="small">查询</el-button>
				<el-button @click="onReset" size="small">重置</el-button>
			</el-form>
		</div>
		<div class="toolbar-container">
			<el-button type="primary" icon="el-icon-plus" size="small" @click="linkToAdd">生成兑换码</el-button>
		</div>
		<el-table class="mt-20 el-table-modify" :data="tableData" border>
			<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
			<el-table-column prop="productId" align="center" label="产品ID"></el-table-column>
			<el-table-column prop="privilegeName" align="center" label="权益类别"></el-table-column>
			<el-table-column prop="brandName" align="center" label="所属品牌"></el-table-column>
			<el-table-column prop="productName" align="center" label="产品名称"></el-table-column>
			<el-table-column prop="cost" align="center" label="成本价"></el-table-column>
			<el-table-column prop="exportPrice" align="center" label="导出价"></el-table-column>
			<el-table-column prop="exchangeId" align="center" label="卡卷编号"></el-table-column>
			<el-table-column prop="code" align="center" label="兑换码"></el-table-column>
			<el-table-column prop="exchanged" align="center" label="状态">
				<template slot-scope="scope">
					<span>{{scope.row.exchanged ? '已兑换' : '未兑换'}}</span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			ref="pagination"
			class="mt-20"
			background
			:page-size="pageOption.pageSize"
			:total="pageOption.total"
			@size-change="onSizeChange"
			@current-change="onPageChange"
			layout="slot,->,prev,pager,next,sizes,jumper"
		>
			<span
				class="pagination-title"
			>共 {{pageOption.total}} 条记录 第 {{pageOption.page}} / {{pageOption.pageTotal}} 页</span>
		</el-pagination>

    <el-dialog title="生成兑换码" :visible.sync="visible" :close-on-click-modal="false" width="400px">
      <create-form v-if="visible"  @cancel="closeDialog"/>
    </el-dialog>
	</div>
</template>

<script>
import { equityQueryNormal } from "@/api/equityCategory";
import { enableBrands } from "@/api/brand";
import { redeemCodeQuery } from "@/api/redeemCode";
import CreateForm from './CreateForm';

export default {
  name: "RedeemCode",
  components: {
		createForm: CreateForm
  },
	data() {
		return {
			equityList: [],
			brandList: [],
			searchData: {
				idOrName: "",
				privilegeId: "",
				brandId: ""
			},
			tableData: [],
			pageOption: {
				page: 1,
				pageSize: 20,
				total: 0,
				pageTotal: 1
			},
			visible: false
		};
	},
	methods: {
		onSearch() {
			this.pageOption.page = 1;
			this.requestData();
		},
		onReset() {
			this.pageOption.page = 1;
			this.searchData.idOrName = "";
			this.searchData.privilegeId = "";
			this.searchData.brandId = "";
			this.requestData();
		},
		linkToAdd() {
			this.visible = true;
		},
		async requestData() {
			const { page, pageSize: size } = this.pageOption;
			const postData = {},
				searchData = this.searchData;
			Object.keys(this.searchData).forEach(key => {
        if (this.searchData[key]) {
          postData[key] = this.searchData[key];
        }
      })

			const { data, total } = await redeemCodeQuery({ page: page - 1, size, ...postData });
			this.tableData = data;
			this.pageOption.total = total;
			this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

			let childrenRefs = this.$refs.pagination.$children;
			this.$nextTick(() => {
				childrenRefs.forEach(child => child.$forceUpdate());
			});
		},
		async requestEquity() {
			const { data } = await equityQueryNormal();
			this.equityList = data;
		},
		async requestBrand() {
			const { data } = await enableBrands();
			this.brandList = data;
		},
		onSizeChange(size) {
			this.pageOption.pageSize = size;
			this.requestData();
		},
		onPageChange(page) {
			this.pageOption.page = page;
			this.requestData();
    },
    closeDialog(isRefresh) {
      this.visible = false;
      if (isRefresh) {
        this.requestData();
      }
    }
	},
	created() {
		this.requestData();
		this.requestEquity();
		this.requestBrand();
	}
};
</script>

<style lang="scss">
.pagination-title {
	font-weight: normal;
}
</style>